<template>
  <div class="gentle-content-wrapper">
    <a-button type="primary" @click="openModal1">打开模态框1</a-button>
    <div style="padding-left: 10px;"></div>
    <a-button type="primary" @click="openModal2">打开模态框2</a-button>
    <popup ref="childRef" :columns="column" :list="list" :dataSource="dataSource"></popup>
    <popup2 ref="childRef2" :list="list2"></popup2>
    <div ref="chartRef" style="width:100vw;height:600px;"></div>
  </div>
</template>

<script setup lang="ts">
import { Button as AButton} from 'ant-design-vue';
import popup from "./popup.vue"
import popup2 from "./popup2.vue"
import {Ref, ref} from 'vue'
import {useECharts} from "/@/hooks/web/useECharts.ts";


const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
setOptions({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: 'cross'
    }
  },
  xAxis: {
    type: 'value',
    axisLine:{
      show:true
    }
  },
  yAxis: {
    type: 'category',
    data: ['停车位','停车挡','断头'],
    axisLabel: {
      // 标签的格式化函数
      formatter: function (value) {
        return value
      }
    }
  },
  series: [
    {
      type: 'scatter',
      data: [
        [102, 0],
        [102, 1],
        [204, 0],
        [306, 1],
        [408, 0]
      ]
    }
  ]
})
// 进行ref数据的加载和转换
const childRef = ref();
const childRef2 = ref();
// 调用子组件的一个方法
const openModal1 = () => {
  (childRef.value as any).openModal();
}
const openModal2 = () => {
  (childRef2.value as any).openModal();
}
// 传入显示行
const columns = [
  { title: '序号', width: 100, dataIndex: 'name', fixed: 'left', align: 'center', },
  { title: '编号', width: 100, dataIndex: 'age', fixed: 'left', align: 'center', },
  { title: '空盘头编号', dataIndex: 'address', width: 150, align: 'center', },
  { title: '内周长(mm)', dataIndex: 'address', width: 150, align: 'center', },
  { title: '外周长(mm)', dataIndex: 'address', width: 150, align: 'center', },
  { title: '克米长', dataIndex: 'address', width: 150, align: 'center', },
  { title: '圈数', dataIndex: 'address', width: 150, align: 'center', },
  { title: '总米数', dataIndex: 'address', width: 150, align: 'center', },
  { title: '生产开始日期', dataIndex: 'address', width: 150, align: 'center', },
  { title: '生产结束日期', dataIndex: 'address', width: 150, fixed: 'right', align: 'center', }
];
const column = ref(columns)
const lists = [
  { key: "生产卡ID", value: 'aI8pE5vA5l', key1: "机台", value1: 'Zero', },
  { key: "平均总米长", value: '999', key1: "平均圈数", value1: '20', },
  { key: "平均内周长", value: '66', key1: "平均外周长", value1: '99', },
  { key: "平均米数", value: '999', key1: "生产状态", value1: '正在消耗', },
  { key: "生产开始日期", value: '2024-7-1 8:00', key1: "生产结束日期", value1: '2025-7-1 8:00', },
]
const lists2 = [
  { key: '编号', value: 'aI8pE5vA5l', key1: '工艺卡', value1: '色丁布（ASJ12ABBh）', },
  { key: '物料类型', value: '色丁布(2022-07-20)', key1: '生产员工', value1: '张三', },
  { key: '米数', value: '666.66', key1: "质量等级", value1: '', },
  { key: '机台', value: 'J003', key1: "生产状态", value1: '正在生产', },
  { key: '生产开始日期', value: '2024-7-1 8:00', key1: '生产结束日期', value1: '', },
  { key: '停车底点数', value: '2', key1: '非停车底点数', value1: '0', },
  { key: '底点总数', value: '2', key1: '停车位数', value1: '3', },
  { key: '盘头组编号', value: '1234567', key1: '理论重量/实际重量', value1: '30.91/', },
]
const list = ref(lists)
const list2 = ref(lists2)
const dataSources = [
  {
    name: '胡彦斌',
    age: 21,
    address: '52',
  },
  {
    name: '222',
    age: 111,
    address: '西湖区湖底公园1号',
  },
  {
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
]
const dataSource = ref(dataSources)
</script>

<style scoped></style>